<template>
  <el-menu
      @click.native="curMenu($event)"
      @select="selectMenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      :collapse-transition="false"
       background-color="#30393E" 
       text-color="#fff"
      :default-active="defaultActive">
        <a href="../admin/index.html">
          <el-menu-item index="" :style="{width:isCollapse?'56px':''}">
              <img :src="cdn+'leftmenu/off-home.png'" class="label_icon" alt="">
              <span slot="title">首页</span>
          </el-menu-item>
        </a>
        <template v-for="(item, index) in menuList">
          <el-submenu :index="String(1+index)" :style="{width:isCollapse?'56px':''}" :key="index" v-if="item.children.length > 0">
            <template slot="title">
                <img :src="cdn+(item.meta.icon || 'leftmenu/off-zujuan.png')" class="label_icon" alt="">
                <span>{{item.meta.title}}</span>
            </template>
            <template v-for="menuItem in item.children">
              <el-menu-item :index="menuItem.name" :key="menuItem.name">
                  <img :src="cdn+(menuItem.meta.icon || 'leftmenu/off-zujuan.png')" class="label_icon" alt="">
                  <span slot="title">{{menuItem.meta.title}}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
    </el-menu>
    <!-- <el-menu @click.native="curMenu($event)" default-active="/home" class="el-menu-vertical-demo" router :collapse="isCollapse" :collapse-transition="false" background-color="#30393E" active-text-color="#fff" text-color="#83878F">
        <el-submenu index="0" :style="{width:isCollapse?'56px':''}">
            <template slot="title">
                <img :src="cdn+'leftmenu/off-zujuan.png'" class="label_icon" alt="">
                <span>权限管理</span>
            </template>
            <el-menu-item index="/home/user">
                <img :src="cdn+'leftmenu/off-zyzujuan.png'" class="label_icon" alt="">
                <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/home/role">
                <img :src="cdn+'leftmenu/off-zyzujuan.png'" class="label_icon" alt="">
                <span slot="title">角色管理</span>
            </el-menu-item>
            <el-menu-item index="/home/menu">
                <img :src="cdn+'leftmenu/off-zyzujuan.png'" class="label_icon" alt="">
                <span slot="title">菜单管理</span>
            </el-menu-item>
            <el-menu-item index="/home/department">
                <img :src="cdn+'leftmenu/off-zyzujuan.png'" class="label_icon" alt="">
                <span slot="title">部门管理</span>
            </el-menu-item>
        </el-submenu>

    </el-menu> -->
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      cdn: "http://p.htwx.net/pandora/"
    };
  },
  computed: {
    defaultActive () {
      return this.$route.name
    },
    ...mapGetters('auth', ['menuList'])
  },
  props: ["isCollapse"],
  methods: {
    showChildren () {
      return item.children && item.children.length > 0
    },
    selectMenu (name) {
      this.$router.push({name})
    },
    curMenu(event) {
      let target = event.target || window.event.target;
      let ele =
        target.closest(".el-submenu__title") || target.closest(".el-menu-item");
      if (ele) {
        let iconSrc = ele.childNodes[0].src;
        let oldOffon =
          iconSrc.substr(parseInt(iconSrc.lastIndexOf("/") + 1), 3) == "off"
            ? "off"
            : "on";
        let newOffon =
          iconSrc.substr(parseInt(iconSrc.lastIndexOf("/") + 1), 3) != "off"
            ? "off"
            : "on";
        let newSrc = iconSrc.replace(oldOffon, newOffon);

        if (oldOffon == "off") {
          document.querySelectorAll(".label_icon").forEach(Ele => {
            Ele.src = Ele.src.replace("on-", "off-");
          });

          ele.childNodes[0].src = newSrc;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.el-menu-vertical-demo {
  height: auto !important;
}

.el-menu {
  height: 100%;
}

.el-menu--collapse {
  width: 200px;
}

.label_icon {
  width: 20px;
  margin-right: 5px;
}

.el-submenu {
  overflow: hidden;
}

.el-menu-item {
  &.is-active {
    background-color: #273a4a !important;
  }
}
</style>
